<script setup lang="ts">
import { ref } from "vue";

const toggle = () => {
  ishow.value = !ishow.value;
};

const ishow = ref(false);
</script>

<template>
  <div class="app-page">
    <div v-show="ishow" class="box1">用v-show控制显示/隐藏</div>
    <div v-if="ishow" class="box2">用v-if控制显示/隐藏</div>
    <button @click="toggle">切换</button>
  </div>
</template>

<style lang="css" scoped>
.box1 {
  width: 400px;
  height: 200px;
  background-color: aqua;
}
.box2 {
  width: 400px;
  height: 200px;
  background-color: blueviolet;
}
</style>
